import React, { useState } from "react";
import { Box, IconButton, Typography, Button } from "@mui/material";
import { DateCalendar } from "@mui/x-date-pickers/DateCalendar";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
import { ChevronLeft, ChevronRight, Today } from "@mui/icons-material";
import { zhCN } from "date-fns/locale";
import dayjs from "dayjs";

function CalendarPage({ onDateChange, externalDate }) {
  const [selectedDate, setSelectedDate] = useState(dayjs(externalDate));
  console.log("日期组件当前日期", selectedDate);

  // 处理日期变化 - 点击日期后跳转到评分页
  // 修改handleDateChange为async函数
  const handleDateChange = (newDate) => {
    setSelectedDate(newDate);
    const formattedDate = dayjs(newDate).format("YYYY-MM-DD");
    onDateChange?.(formattedDate);
  };

  // 同样修改回到今日按钮
  const handleGoToToday = async () => {
    const today = new Date();
    const formattedDate = dayjs(today).format("YYYY-MM-DD");

    setSelectedDate(today);
    onDateChange(formattedDate);
  };

  // 自定义日历头部
  const CustomCalendarHeader = ({ currentMonth, onMonthChange }) => {
    const handlePreviousMonth = () => {
      const newDate = new Date(currentMonth);
      newDate.setMonth(newDate.getMonth() - 1);
      onMonthChange(newDate);
    };

    const handleNextMonth = () => {
      const newDate = new Date(currentMonth);
      newDate.setMonth(newDate.getMonth() + 1);
      onMonthChange(newDate);
    };

    return (
      <Box
        sx={{
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          px: 2,
          py: 1.5,
          borderBottom: 1,
          borderColor: "divider",
        }}
      >
        <IconButton onClick={handlePreviousMonth} size="medium">
          <ChevronLeft fontSize="medium" />
        </IconButton>

        <Typography
          variant="h5"
          sx={{
            fontFamily: '"ZCOOL KuaiLe", cursive',
            fontWeight: 700,
            fontSize: "1.4rem",
            color: "text.primary",
          }}
        >
          {currentMonth.toLocaleDateString("zh-CN", {
            year: "numeric",
            month: "long",
          })}
        </Typography>

        <IconButton onClick={handleNextMonth} size="medium">
          <ChevronRight fontSize="medium" />
        </IconButton>
      </Box>
    );
  };

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns} locale={zhCN}>
      <Box
        sx={{
          width: "100%",
          height: "100%",
          bgcolor: "background.paper",
          overflow: "hidden",
          display: "flex",
          flexDirection: "column",
        }}
      >
        {/* 回到今日按钮 */}
        <Box sx={{ p: 2, pb: 0 }}>
          <Button
            variant="outlined"
            size="small"
            startIcon={<Today />}
            onClick={handleGoToToday}
            sx={{
              fontFamily: '"ZCOOL KuaiLe", cursive',
              textTransform: "none",
              borderRadius: 2,
            }}
          >
            回到今日
          </Button>
        </Box>

        <DateCalendar
          value={selectedDate}
          onChange={handleDateChange}
          slots={{
            calendarHeader: CustomCalendarHeader,
          }}
          slotProps={{
            day: {
              sx: {
                fontFamily: "Balsamiq Sans",
                fontSize: "1rem",
              },
            },
          }}
          sx={{
            flex: 1,
            "& .MuiPickersDay-root": {
              "&.Mui-selected": {
                bgcolor: "primary.main",
                color: "primary.contrastText",
              },
              "&:hover": {
                bgcolor: "primary.light",
              },
            },
          }}
        />
      </Box>
    </LocalizationProvider>
  );
}

export default CalendarPage;
